<template>
    <div class="form-group input-btn">
        <input :type="type" class="form-control" :placeholder="placeholder" :id="id" :required="required">
        <div class="display-inline pull-right" style="">
            <span class="span"></span>
            <button class="btn btn-default b-no" type="button">
                <slot></slot>
            </button>
        </div>
    </div>
</template>

<script>
    export default {
    	name: 'ButtonInput',
        props: {
            type: {type: String, default: 'text'},
            placeholder: {type: String},
            id: {type: String},
            required: {type: String}
        }
    };
</script>

<style scoped="">
    .input-btn > div {margin-top: -38px; margin-right: 1px}
    .input-btn > input {padding-right: 50px}
    .input-btn > div > button:hover{background-color: white!important;}
    .input-btn > div > button:active{background-color: white!important;}
    .span{ border-left: 1px solid #dddddd}
</style>

